<template>
    <view class="container orderdetails">
        <view class="ftop">
            <view class="bignav"></view>
            
            <uni-search-bar bgColor="#fff" @confirm="search"  v-model="keyword"
             placeholder="项目名称/内容搜索"
            @cancel="scancelearch" @clear="search"></uni-search-bar>
            <view class="nav-header" v-if="shownav">
                <view class="nav-item" :class="nav == 0?'selacion':''" @click="nav = 0">全部订单</view>
                <view class="nav-item" :class="nav == 1?'selacion':''" @click="nav = 1">正单订单</view>
                <view class="nav-item" :class="nav == 2?'selacion':''" @click="nav = 2">补单订单</view>
                <view class="nav-item" :class="nav == 3?'selacion':''" @click="nav = 3">售后单</view>
                <view class="nav-item" :class="nav == 4?'selacion':''" @click="nav = 4">工程单</view>
            </view>
        </view>
        <view class="bbbb" v-if="role_id!=12"></view>
        <view class="aaaa" v-else></view>
        <view v-for="(item,index) in lists" :key="index">
            <OrderItem :role_id="role_id" :item="item" @delorder="delorder"></OrderItem>
        </view>    
  
        <Vmenu v-if="$permission('create_order')"></Vmenu>
        <view class="more">
            <template v-if="page<last_page">
                加载更多~
            </template>    
            <template v-else>
                没有更多了~
            </template>
        </view>    
    </view>
</template>

<script>
import Vmenu from '@/components/menu/menu.vue'
import OrderItem from '@/components/orderItem.vue'
export default{
    name:"orderlist",
    data(){
        return{
            nav:0,
            lists:[],
            page:1,
            last_page:1,
            status:'',
            keyword:'',
            issel:0,
            role_id:'',
            shownav:false
        }
    },
    onPullDownRefresh(){
        this.page = 1
        this.lists = []
        var _this = this
        setTimeout(function () {
            uni.stopPullDownRefresh();
            _this.getlists()
        }, 500);
    },
    onReachBottom(){
        if(this.page<this.last_page){
            this.page ++ 
            this.getlists()
        }
    },
    components: {
        Vmenu,OrderItem
    },
    watch:{
        'nav':function(newval){
          
            this.search()
        }
    },
    onLoad(option) {
        if(option.status){
            this.status = option.status
        }
        if(option.issel){
            this.issel = option.issel
        }
        this.role_id = uni.getStorageSync('nantong_role_id');
        this.page = 1
        this.lists = []  
        this.$api.get(`user/main`).then(({data})=>{
            this.$msgNum()
            this.getlists()
            this.shownav = data.shownav
        })
            
    },
    onShow(){
    
      
    },
    methods:{

        scancelearch(){
            this.keyword = ''
            this.search()
        },

        search(){
            this.page = 1
            this.lists = []
            this.getlists()
        },
        getlists(){
            var url
            if(this.nav == 4){
                url = `project.order/orderlist?status=${this.status}&keyword=${this.keyword}&page=${this.page}`
            }else{
               if(this.role_id == 12){
                   url = `project.order/orderlist?status=${this.status}&keyword=${this.keyword}&page=${this.page}`
               }else{
                   url = `order/orderlist?typec=${this.nav}&status=${this.status}&keyword=${this.keyword}&page=${this.page}`
               } 
            }
            
            this.$api.get(url).then(({data})=>{
                this.last_page = data.last_page
                this.lists = this.lists.concat(data.data)
            })
        },
        delorder(id,index){
            var _this = this
            uni.showModal({
                content:'是否确认删除该订单，删除后不可恢复',
                success:function(c){
                    if(c.confirm){
                        var url
                        if(_this.role_id == 12){
                           url = `project.order/delorder`
                        }else{
                           url = `order/delorder` 
                        }
                        _this.$api.post(url,{id:id}).then((res)=>{
                            _this.lists.splice(index,1)
                        })
                    }
                }
            })
            
        }
    }
}
</script>

<style lang="less" scoped>
    .ftop{
        width: 100%;
        position: fixed;
        top: var(--status-bar-height)rpx;
        left:0;
        z-index: 100;
        background-color: #f5f5f5;
    }
    .aaaa{
        height: calc(var(--status-bar-height) + 150rpx);
    }
    .bbbb{
        height: calc(var(--status-bar-height) + 200rpx);
    }
    .bignav{
        
    }
    .icon{
        margin-right: 10rpx;
    }
    .phone{
        color: #2979ff;
    }
    .order{
        margin-top: 150rpx;
        .order-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            .ordersn{
                color: #000;
                font-weight: 600;
                font-size: 24rpx;
            }
            .timer{
                font-size: 26rpx;
                color: #3a3a3a;
                display: flex;
                align-items: center;
            }
        }
        .content{
            .goods_name{
                height: 60rpx;
                .title{
                    font-weight: bold;
                }
                .status_name{
                    
                }
            }
        }
        .footers{
            height: 80rpx;
           .user{
               display: flex;
               align-items: center;
              .headimg{
                  width: 60rpx;
                  height: 60rpx;
                  margin-right: 10rpx;
                  image{
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 50%;
                  }
              } 
           }
            .action{
                align-items: center;
                button{
                    height: 60rpx;
                    margin: 0 10rpx;
                }
            } 
        }
    
    }
    .nav-item{
        font-size: 26rpx;
    }
</style>